<!DOCTYPE html>

<html class="no-js" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> 

<head th:replace="common/sections :: header-css"/>

<body>


	<!-- Left Panel -->
	<aside th:replace="common/menus :: left-panel"></aside>

    <!-- Right Panel -->
	<div id="right-panel" class="right-panel">
	
		<header th:replace="common/menus :: rp-header"/>
		
		<div th:replace="common/menus :: rp-breadcrumbs (pageTitle='Password Management')"/>
    
    	<!-- Page Content Begin -->
    
	    	<div class="content mt-3">
	            <div class="animated fadeIn">
	                
	                <div class="row">				
						<div class="col-lg-6">
		                    <div class="card">
		                        <div class="card-header bg-flat-color-1">
		                            <strong class="card-title text-white">Change Password</strong>
		                        </div>
		                        <div class="card-body">
		                        
		                        <!-- Begin Alerts -->
	                        	<div class="form-group text-left">
                 					<div class="sufee-alert alert with-close alert-danger alert-dismissible fade show" th:if="${errorMsg}">
			                       		<span class="badge badge-pill badge-danger">Error</span>
			                       		<span th:text="${errorMsg}"></span>
			                       		<button type="button" class="close" data-dismiss="alert" aria-label="Close">
			                           		<span aria-hidden="true">&times;</span>
			                       		</button>
			                   		</div>
                 				</div>
                                   
                                <div class="form-group text-left">
                                	<div class="sufee-alert alert with-close alert-success alert-dismissible fade show" th:if="${successMsg}">
                      					<span class="badge badge-pill badge-success">Success</span>
                          				<span th:text="${successMsg}"></span>
                        				<button type="button" class="close" data-dismiss="alert" aria-label="Close">
                          					<span aria-hidden="true">&times;</span>
                      					</button>
                  					</div>
                  				</div>
                                <!--  End Alerts -->
                                 
		                         <!-- Change Password -->
	                          	<div id="pay-invoice">
	                              	<div class="card-body">
	                                  	<div class="card-title">
	                                      	<h3 class="text-center">Update New Password</h3>
	                                  	</div>
	                                  	<hr>
	                                  	<form th:action="@{/user/password}" method="post">
	                                      	<div class="form-group">
	                                          	<label for="currentPassword" class="control-label mb-1"><strong>Current Password</strong></label>
	                                          	<input id="currentPassword" name="currentPassword" type="password" class="form-control" required>
	                                      	</div>
	                                      	<div class="form-group">
	                                          	<label for="newPassword" class="control-label mb-1"><strong>New Password</strong></label>
	                                          	<input id="newPassword" name="newPassword" type="password" class="form-control" required th:pattern="${patternPassword}" th:title="${patternPasswordMSG}">
	                                      	</div>
	                                      	<div class="form-group">
	                                          	<label for="confirmPassword" class="control-label mb-1"><strong>Confirm New Password</strong></label>
	                                          	<input id="confirmPassword" name="confirmPassword" type="password" class="form-control" required>
	                                      	</div>
	                                      	<div>
	                                          	<button id="payment-button" type="submit" class="btn btn-primary btn-lg btn-block">
	                                              	<i class="fa fa-lock fa-lg"></i>&nbsp;
	                                              	<span id="payment-button-amount">Update Password</span>
	                                              	<span id="payment-button-sending" style="display:none;">Updating…</span>
	                                          	</button>
	                                      	</div>
	                                  	</form> <!--  End Form -->
	                              	</div> <!-- End Card Body -->
	                          	</div> <!-- End Pay Invoice -->
		
		                    </div> <!-- End Card -->
		               	</div> <!-- End Column 6  -->	    				
	    			</div><!-- .row -->
	    			</div>
	            </div><!-- .animated -->
	        </div><!-- .content -->
	        
	    <!-- Page Content End -->
	    
	</div> <!-- End right panel -->
    
	<!-- Footer -->
	<div th:replace="common/sections :: footer-scripts"></div>
	
	<script type="text/javascript">
		var password = document.getElementById("newPassword"), confirm_password = document.getElementById("confirmPassword");

		function validatePassword(){
	  		if(password.value != confirm_password.value) {
	    		confirm_password.setCustomValidity("Passwords Do Not Match");
	  		} else {
	    		confirm_password.setCustomValidity('');
	 		 }	
		}

		password.onchange = validatePassword;
		confirm_password.onkeyup = validatePassword;
	</script>

</body>
</html>
